import React, { Component } from 'react';
import Styles from './Calendar.scss';
import Select from './../../Element/Select/Select';
export default class Calendar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            DateObj: new Date(),
            weeksDay: {},
            today: new Date().getDate(),
            monthList: [],
            year: null,
            month: null,
            yearList: []
        };
    }
    componentDidMount() {
        let { DateObj, weeks, today, monthList, yearList } = this.state;
        let year = DateObj.getFullYear();
        let month = DateObj.getMonth() + 1;
        for (let index = 1; index <= 12; index++) {
            monthList.push({
                text: index + '月',
                value: index
            });
        }
        for (let index = year; index >= 1946; index--) {
            yearList.push({
                text: index + '年',
                value: index
            });
        }
        this.setState(
            {
                monthList: monthList,
                yearList: yearList,
                year: year,
                month: month
            },
            () => {
                this.getWeeksIncludeDays(year, month);
            }
        );
    }
    getWeeksIncludeDays(year, month) {
        let { weeksDay } = this.state;
        let firstDay = this.getWeeks(year, month);
        let allDay = this.getDays(year, month);
        let preMonth = this.getDays(year, month - 1);
        let days = [];
        let sortDays = [];
        for (let index = preMonth; index > preMonth - (firstDay - 1); index--) {
            sortDays.push(index);
            sortDays.sort((a, b) => a - b);
        }
        days = sortDays;
        for (let index = 1; index <= allDay; index++) {
            days.push(index);
        }
        if (days.length < 6 * 7) {
            let pushLength = 6 * 7 - days.length;
            for (let index = 1; index <= pushLength; index++) {
                days.push(index);
            }
        }
        for (let i = 1; i <= 6; i++) {
            weeksDay[i] = days.splice(0, 7);
        }
        this.setState({
            weeksDay: weeksDay
        });
    }
    // 每月有多少天
    getDays(year, curMonth) {
        let curDate = new Date();
        /* 获取当前月份 */
        /*  生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
        curDate.setMonth(curMonth + 1);
        /* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */
        curDate.setDate(0);
        /* 返回当月的天数 */
        console.log('d', curDate.getDate());
        return curDate.getDate();
    }
    // 获取每月1日是周几
    getWeeks(year, month) {
        var d = new Date(year, month - 1, 1).getDay();
        return d;
    }
    selectchange = value => {
        let { DateObj, year } = this.state;
        this.setState(
            {
                month: value.value
            },
            () => {
                this.getWeeksIncludeDays(year, value.value - 1);
            }
        );
    };
    selectYear = value => {
        let { DateObj, month } = this.state;
        this.setState(
            {
                year: value.value
            },
            () => {
                this.getWeeksIncludeDays(value.value, month);
            }
        );
    };
    selectDay = (day, week) => {
        console.log('day, week', day, week);
    };
    render() {
        const { options, placeHolder } = this.props;
        const { weeksDay, monthList, yearList, year, month } = this.state;
        let str = [];
        for (const key in weeksDay) {
            str.push(
                weeksDay[key].map((day, index) => {
                    return (
                        <td
                            key={index}
                            onClick={() => this.selectDay(day, key)}
                        >
                            {day}
                        </td>
                    );
                })
            );
        }
        return (
            <div className={Styles.yutaoCalendarContent}>
                <div>日历</div>
                <Select
                    options={yearList}
                    placeHolder={'年份'}
                    value={year}
                    selectchange={this.selectYear}
                />
                <Select
                    options={monthList}
                    placeHolder={'月份'}
                    value={month}
                    selectchange={this.selectchange}
                />
                <div>
                    <table className={Styles.calenderTable} cellSpacing="0">
                        <thead>
                            <tr>
                                <th>一</th>
                                <th>二</th>
                                <th>三</th>
                                <th>四</th>
                                <th>五</th>
                                <th>六</th>
                                <th>日</th>
                            </tr>
                        </thead>
                        <tbody>
                            {str.map((td, key) => {
                                return <tr key={key}>{td}</tr>;
                            })}
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
}
